<template>
  <div class="familyAccount">
    <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="主页设置">
        <div class="form1">
          <span class="titles">背景图：</span>
          <a-upload
            name="filecontent"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/api/upload/img"
            :before-upload="beforeUpload"
            @change="handleChange($event, 'Disabilityimg')"
          >
            <img
              style="width: 80px; height: 80px"
              v-if="Disabilityimg"
              :src="imageWebUrl + Disabilityimg"
              alt="avatar"
            />
            <div v-else>
              <img
                style="width: 80px"
                src="@/assets/image/competition/uploadImg.png"
                alt="image"
              />
            </div>
          </a-upload>
          <span class="txt32">只支持.jpg，.png 格式,不能大于1G</span>
        </div>
        <div class="form">
          <span class="titles">企业介绍：</span>
          <!-- 富文本 -->
          <UE
            editorId="introduceEditor"
            :initContent="ueInitText"
            @input="getContent"
            key="introduceKey"
          />

        </div>
        <div class="form">
          <span class="titles">团队介绍：</span>
          <!-- 富文本 -->
          <UE
            editorId="sponsorEditor"
            :initContent="ueSponsorInit"
            @input="getSponsorContent"
          />
        </div>
         <a-button class="baocunbtn" type="primary">保存</a-button>
      </a-tab-pane>
    </a-tabs>

  </div>
</template>

<script>
import UE from "@/components/UE.vue";
export default {
  // 可用组件的哈希表
  components: { UE },
  data() {
    return {
      // 富文本初始及获取
      ueInitText: "",
      ueGetText: "",
    };
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    // 富文本内容有变化时触发
    getContent(e) {
      this.$set(this, "ueGetText", e);
    },
  },
};
</script>

<style scoped lang="less">
  .form1{
    display: flex;
    margin-left: 53px;
  }

  .baocunbtn{
    width: 108px;
    height: 40px;
    background: #FFBE37;
    border-radius: 1px;
    margin-left: 53px;
    margin-top: 50px;
  }

  .vue-ueditor-wrap[data-v-1e1388a0] {
      line-height: 1 !important;
      width: 730px;
      display: inline-block;
      vertical-align: top;
  }

  .titles{
    width: 80px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .form{
    margin-top: 24px;
    .titles{
      width: 80px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-left: 53px;
    }
  }

  .txt32{
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-left: 8px;
      margin-top: 86px;
  }

  /deep/.ant-upload-picture-card-wrapper{
    width: auto;
  }
.noList {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 116px;
  img {
    width: 180px;
    height: 158px;
    margin: 0 auto;
  }
  p {
    width: 259px;
    margin: 0 auto;
    margin-top: 16px;
    color: #333333;
    font-size: 15px;
    line-height: 21px;
  }
}
// .ant-modal-confirm-body-wrapper::before{
/deep/.ant-btn-primary {
  color: #333333 !important;
}
// }
/deep/.ant-select {
  margin-top: 24px;
}
/deep/.ant-modal {
  width: 550px !important;
}
/deep/.ant-modal-body {
  padding: 0px 60px;
  .code {
    margin-top: 24px;
    .ant-input-affix-wrapper {
      width: 300px;
    }
    .getCode {
      display: inline-block;
      width: 113px;
      height: 32px;
      margin-left: 16px;
      text-align: center;
      line-height: 32px;
      border-radius: 4px;
      color: #333333;
    }
  }
}
/deep/.ant-modal-title {
  text-align: center;
  padding: 49px 0 20px;
}
/deep/.ant-modal-header {
  border: 0;
}
/deep/.ant-modal-footer {
  text-align: center;
  border: 0;
  padding: 49px 0 41px;
  .ant-btn {
    width: 128px;
    height: 44px;
    border: 1px solid #ffbe37;
    color: #ffbe37;
  }
  .ant-btn-primary {
    border: 0;
    background: #ffbe37;
    color: #333333;
    margin-left: 24px;
  }
}
.familyAccount {
  .ant-tabs-tabpane-active {
    padding-bottom: 50px;
  }
  .list {
    li {
      position: relative;
      margin-left: 27px;
      margin-bottom: 16px;
      width: 800px;
      height: 149px;
      padding: 30px 32px 44px;
      background: #ffffff;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      .top {
        display: flex;
        align-items: bottom;
        p {
          margin-right: 32px;
        }
        .name {
          font-size: 24px;
          font-weight: bold;
          color: #333333;
          line-height: 24px;
        }
        .phone {
          font-size: 16px;
          color: #333333;
          line-height: 24px;
        }
        .nav {
          // width: 52px;
          height: 24px;
          padding: 0 8px;
          background: #ffbe37;
          font-size: 14px;
          color: #333333;
          line-height: 24px;
          border-radius: 2px;
          // text-align: center;
        }
      }
      .bottom {
        margin-top: 24px;
        font-size: 16px;
        color: #666666;
        line-height: 24px;
      }
      .remove {
        position: absolute;
        right: 27px;
        bottom: 24px;
        cursor: pointer;
        font-size: 14px;
        color: #666666;
        line-height: 20px;
      }
    }
  }
  .btn {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    .add {
      width: 108px;
      height: 42px;
      font-size: 16px;
      margin-right: 32px;
      text-align: center;
      border-radius: 2px;
      line-height: 40px;
      cursor: pointer;
      border: 1px solid #ffbe37;
      color: #ffbe37;
    }
    .add:hover {
      background: #ffbe37;
      color: #333333;
      // border: 0;
    }
    .title {
      color: #333333;
      font-size: 16px;
    }
  }
}
</style>
